<template>
    <view :class="{ 'bd-b': showBorder }" class="uni-m-goods-col">
        <view class="goods-item" @click="navToDetailPage()">
            <!-- 图片 begin -->
            <view class="image-box">
                <image
                    class="goods-image"
                    :src="baseFileUri + goods.imagePath"
                    :lazy-load="true"
                    mode="aspectFill"
                ></image>
                <view
                    v-if="goodsImageTag"
                    :style="themeStyles.backgroundMainColor"
                    class="goods-image-tag"
                >
                    <slot name="imageTag">{{ goodsImageTag }}</slot>
                </view>
                <view v-if="goodsStatusText" class="goods-status">{{
                    goodsStatusText
                }}</view>
            </view>
            <!-- 图片 end -->

            <!-- 商品信息 begin -->
            <view class="goods-info">
                <view class="goods-title clamp2">{{ goods.goodsName }}</view>

                <view
                    :style="themeStyles.textMainColor" 
                    class="goods-additional">{{ additionalText || "" }}</view>

                <view :style="themeStyles.adronmentColor" class="goods-type">
                    <slot name="goodsType">
                        {{ goodsTypeText || "" }}
                    </slot>
                </view>

                <view class="goods-meta">
                    <view class="goods-meta__left">
                        <view
                            v-if="priceFavorText"
                            :style="{ color: themeStyles.mainColor }"
                            class="favor"
                            >{{ priceFavorText }}</view
                        >
                        <view
                            :style="{ color: themeStyles.mainColor }"
                            class="cut-price"
                        >
                            <view class="price">{{
                                goodsPrice[0] || "0"
                            }}</view>
                            <view class="decimal">{{
                                goodsPrice[1] || "00"
                            }}</view>
                        </view>
                        <view v-if="latePrice" class="late-price">
                            <slot name="latePrice">{{ latePrice || "" }}</slot>
                        </view>
                    </view>

                    <view class="goods-meta__right">
                        <slot name="metaRight"></slot>
                    </view>
                </view>
            </view>
            <!-- 商品信息 end -->
        </view>
    </view>
</template>

<script>
import uniIcon from "@/components/uniIcon/uniIcon";

export default {
    components: {
        uniIcon
    },
    props: {
        goods: {
            type: Object,
            default: function() {
                return {};
            }
        },

        // 跳转链接
        routeLink: {
            type: String,
            default: ""
        },

        // 是否显示下边框
        showBorder: {
            type: Boolean,
            default: true
        },

        mainColor: {
            type: String,
            default: ""
        },

        // 商品状态
        goodsStatusText: {
            type: String,
            default: ""
        },

        // 商品额外信息
        additionalText: {
            type: String,
            default: ""
        },

        // 当前价格提示
        priceFavorText: {
            type: String,
            default: ""
        },

        goodsPrice: {
            type: Array,
            default() {
                return [];
            }
        },

        goodsImageTag: {
            type: String,
            default: ""
        },

        // 原过去的（价格）
        latePrice: {
            type: String,
            default: ""
        }
    },

    data() {
        return {};
    },

    created() {
        console.log("baseFileUri阿萨大", this.baseFileUri);
        // if (!this.goods.priceStr) return;
        // this.price = `${this.goods.priceStr}`.split(".");
    },

    methods: {
        // 跳转详情页
        navToDetailPage() {
            if (!this.routeLink) return;
            uni.navigateTo({
                url: this.routeLink
            });
        }
    }
};
</script>


<style lang="scss" scoped>
.uni-m-goods-col {
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;

    .goods-item {
        display: flex;
        position: relative;
        height: 220rpx;

        &.bd-b::before {
            content: "";
            height: 1rpx;
            color: $theme-bd-color;
            opacity: 0.5;
        }

        .image-box {
            position: relative;
            background-color: $theme-img-bg-color-test;

            width: 220rpx;
            border-radius: 6rpx;
            overflow: hidden;
            height: 100%;

            .goods-image {
                width: 100%;
                height: 100%;
            }

            .goods-image-tag {
                position: absolute;
                top: 0;
                left: 0;
                width: 70rpx;
                height: 34rpx;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 16rpx;
                border-radius: 0 0 6rpx 0;
                color: $theme-bg-text-color;
            }

            .goods-status {
                position: absolute;
                display: flex;
                justify-content: center;
                align-items: center;
                bottom: 0;
                right: 0;
                left: 0;
                height: 60rpx;
                font-size: $theme-size-small-base;
                color: $theme-bg-text-color;
                border-radius: 0 0 6rpx 6rpx;
                background-color: rgba(51, 51, 51, 0.6);
            }
        }

        .goods-info {
            position: relative;
            flex: 1;
            width: 462rpx;
            height: 100%;
            margin-left: 20rpx;

            .goods-title {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                font-weight: 500;
                font-size: $theme-size-base;
                line-height: 40rpx;
                height: 80rpx;
            }

            .goods-additional {
                display: flex;
                align-items: center;
                margin-top: 4rpx;
                height: 34rpx;
                color: $theme-color-ghost-base;
                font-size: $theme-size-small-base;
            }

            .goods-type {
                display: flex;
                align-items: center;
                height: 36rpx;
                margin-top: 10rpx;
                font-size: 26rpx;
            }

            .goods-meta {
                //   position: absolute;
                //   bottom: 0;
                //   left: 0;
                //   right: 0;
                margin-top: 24rpx;
                display: flex;
                align-items: flex-end;
                justify-content: space-between;

                &__left {
                    font-family: "DIN-Regular";
                    // display: flex;
                    // flex-direction: row;
                    // align-items: flex-end;
                    line-height: $theme-size-large-base;
                    .favor {
                        display: inline-block;
                        font-weight: 500;
                        margin-right: 2rpx;
                        font-size: $theme-size-base;
                        vertical-align: 2rpx;
                    }

                    .cut-price {
                        display: inline-block;

                        font-family: DIN-Regular, DIN;
                        display: inline-block;
                        font-weight: bold;
                        //   display: flex;
                        //   flex-direction: row;
                        //   align-items: flex-end;
                        line-height: $theme-size-large-base;

                        .price {
                            display: inline-block;
                            vertical-align: 0;
                            font-size: $theme-size-large-base;
                            &::before {
                                content: "￥";
                                font-size: $theme-size-small-base;
                                display: inline-block;
                                font-weight: 400;
                                vertical-align: 0;
                            }
                        }

                        .decimal {
                            display: inline-block;
                            vertical-align: 0;
                            font-size: $theme-size-base;
                            line-height: 26rpx;
                            &::before {
                                content: ".";
                                display: inline-block;
                                vertical-align: 0;
                            }
                        }
                    }

                    .late-price {
                        display: inline-block;

                        margin-left: 8rpx;
                        text-decoration: line-through;
                        color: $theme-color-ghost-base;
                        font-size: $theme-size-smaller-base;
                        vertical-align: 2rpx;
                        &::before {
                            content: "￥";
                            display: inline-block;
                        }
                    }
                }

                &__right {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                }
            }
        }
    }
}
</style>